<template>
  <div class="detail-container">
    <search-header class="detail-header" :style="`background-color:${headbgC}`">
      <template v-slot:left>
        <van-icon
          name="arrow-left"
          :color="headftC"
          size="35px"
          @click="goBack"
        />
      </template>
    </search-header>
    <van-loading
      size="30px"
      text-size="20px"
      class="loading"
      color="chocolate"
      v-if="!isShow"
      >加载中...</van-loading
    >
    <div v-if="isShow">
      <div class="bg" :style="`background-image: url(${menu.pic})`"></div>
      <div class="content" ref="container">
        <h2>{{ menu.name }}</h2>
        <p>标签：{{ menu.tag }}</p>
        <p>准备时间:{{ menu.preparetime }}</p>
        <p>亨饪时间:{{ menu.cookingtime }}</p>
        <div class="intro">
          <p>
            {{ menu.content }}
          </p>
          <!-- <p>这个色彩缤纷的彩蔬卷，低热量，高营养，是一道秀色可餐的减肥餐~</p> -->
        </div>
        <div class="material">
          <comp-detail-tile>需要食材</comp-detail-tile>
          <ul>
            <li v-for="item in menu.material" :key="item.mname">
              <comp-material-item>
                <span class="mname">{{ item.mname }}</span>
                <span class="amount">{{ item.amount }}</span>
              </comp-material-item>
            </li>
          </ul>
        </div>
        <div class="process">
          <comp-detail-tile>亨饪步骤</comp-detail-tile>
          <ul>
            <li v-for="(item, index) in menu.process" :key="item.pcontent">
              <comp-process-item>
                <p class="step">
                  步骤{{ index + 1 }}/{{ menu.process.length }}
                  <span>开启下厨模式</span>
                </p>
                <div class="image-box">
                  <img :src="`${item.pic}`" alt="" />
                </div>
                <div class="desc">{{ item.pcontent }}</div>
              </comp-process-item>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="collect" @click="isCOllect">
      <div class="collect-box">
        <van-icon :name="iconN" :color="iconC" size="18px" /><span>{{
          coltext
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import CompDetailTile from "../components/comp-detailTile.vue";
import CompMaterialItem from "../components/comp-materialItem.vue";
import CompProcessItem from "../components/comp-processItem.vue";
import SearchHeader from "../components/search-header.vue";

export default {
  name: "Detail",
  components: {
    CompDetailTile,
    CompMaterialItem,
    SearchHeader,
    CompProcessItem,
  },
  data() {
    return {
      iconC: "chocolate",
      iconN: "star-o",
      coltext: "收藏",
      headbgC: "transparent",
      headftC: "#fff",
      list: [],
      sName: "",
      page: 0,
      id: 0,
      menu: {},
      isShow: false,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
      localStorage.setItem("list", JSON.stringify(this.list));
    },
    handleScroll() {
      // console.log(window.pageYOffset);
      // console.log(this.$refs["container"].getBoundingClientRect().top);
      if (window.pageYOffset >= 200) {
        this.headftC = "#999";
        this.headbgC = "#fff";
      } else {
        this.headftC = "#fff";
        this.headbgC = "transparent";
      }
    },
    hasCollect(bool) {
      if (bool) {
        this.menu.collected = true;
        this.iconN = "star";
        this.coltext = "已收藏";

        // localStorage.setItem("coll-list", JSON.stringify(this.collectList));
      } else {
        this.menu.collected = false;
        this.iconN = "star-o";
        this.coltext = "收藏";
      }
    },
    isCOllect() {
      if (!this.menu.collected) {
        this.hasCollect(true);
        let obj = this.menu;
        this.collectList.push(obj);
      } else {
        this.hasCollect(false);
      }
    },
  },

  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    this.list = JSON.parse(localStorage.getItem("list"));
    this.id = this.$route.query.id;
    axios
      .get(`/detail?id=${this.id}&appkey=d9c770661cb89052d8785cadce76e57a`)
      .then((response) => {
        let data = response.data;
        let obj = data.result.result;
        if (obj) {
          this.isShow = true;
        }
        this.collectList.some((item, i) => {
          if (item.id == obj.id) {
            this.hasCollect(true);
          } else {
            this.hasCollect(false);
          }
          return true;
        });

        if (obj.collected == undefined) {
          this.$set(obj, "collected", false);
        }
        this.menu = obj;
      });
  },
};
</script>

<style lang="less" scoped>
.detail-container {
  width: 100%;
  height: 100%;

  // overflow-y: hidden;
  .detail-header {
    height: 40px;
  }
  .bg {
    position: fixed;
    top: 0;
    width: 100%;
    height: 300px;
    z-index: -1;

    background-repeat: repeat-x;
    background-size: 100% 300px;
    background-position: 50% 0;
    background-attachment: fixed;
    vertical-align: middle;
  }
  .collect {
    position: fixed;
    right: 0;
    bottom: 40px;
    z-index: 10000;
    background-color: #fde591;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    .collect-box {
      height: 30px;
      // width: 100px;
      padding: 6px 15px;
      .van-icon {
        text-align: left;
      }
      span {
        margin-left: 5px;
        font-size: 16px;
      }
    }
  }
  .loading {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .content {
    width: 100%;
    position: absolute;
    top: 200px;
    background-color: #fff;
    z-index: 100;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 20px;
    padding-bottom: 80px;
    box-sizing: border-box;
    > h2 {
      font-size: 25px;
      margin-bottom: 20px;
    }
    > p {
      font-size: 12px;

      margin-bottom: 4px;
      color: chocolate;
    }
    .intro {
      font-size: 16px;
      padding-top: 10px;
      p {
        margin-top: 3px;
      }
    }
  }

  .process {
    .step {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
    }
    .image-box {
      width: 100%;
      // height: 200px;
      text-align: center;
      margin-top: 10px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
    .desc {
      font-size: 16px;
      padding: 3px 0;
      margin-bottom: 10px;
    }
  }
}
</style>